<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ndraw</title>
    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
    <style>
        #node-input {
            position: absolute;
            height: 20px;
            width: 150px;
            border-radius: 5px;
            font-size: 10px;
            border: 1px solid darkcyan;
            display: none;
        }

        #color-container {
            position: absolute;
            border-radius: 4px;
            font-size: 10px;
            border: 1px solid darkcyan;
            width: 45px;
            text-align: center;
            display: none;
            background-color: #faf9f4;
            width: 225px;
            height: 200px;
        }

        #color-picker {
            width: 200px;
            height: 200px
        }

        #color-slide {
            width: 25px;
            height: 200px
        }

        .menu {
            list-style: none;
            margin: 0;
            padding: 0;
            position: absolute;
            left: 20px;
            top: 150px;
            border-radius: 4px;
            font-size: 10px;
            border: 1px solid darkcyan;
            width: 45px;
            text-align: center;
            display: none;
            background-color: #faf9f4;
        }

        .menu li {
            padding: 2px;
        }

        .menu li:hover {
            background-color: darkcyan;
            cursor: pointer;
        }
    </style>
    <script>
        templateJs
    </script>
    <script>
        window.onload = function () {
            let options = {
                "drag": isDrag,
                "link-color": "#3f6c53",
                "link-width-offset": 0
            };
            metricFlow = MetricFlow("graph", options);

            Dreamer.info("You can draw something by your mouse now!", 5000);
            metricFlow.back.oncontextmenu = function (e) {
                preventDefault(e);
                let colorContainer = document.querySelector("#back-menu");
                colorContainer.style.display = 'block';
                colorContainer.style.left = (e.x + 30) + 'px';
                colorContainer.style.top = (e.y - 5) + 'px';
            };

            metricFlow.back.onmousedown = function (e) {
                isDown = true;
                let x = e.clientX;
                let y = e.clientY;
                moveTracks = [];
                lastPathX = x;
                lastPathY = y;
                for (let key of menuMap.keys()) {
                    metricFlow.removeNode(key);
                    menuMap.delete(key);
                }
                let nodeInput = document.querySelector("#node-input");
                nodeInput.style.display = 'none';
                let nodeMenu = document.querySelector("#node-menu");
                nodeMenu.style.display = 'none';
                let lineMenu = document.querySelector("#line-menu");
                lineMenu.style.display = 'none'
                let rayMenu = document.querySelector("#ray-menu");
                rayMenu.style.display = 'none'
                let colorContainer = document.querySelector("#color-container");
                colorContainer.style.display = 'none';
                document.querySelector("#color-picker").innerHTML = '';
                document.querySelector("#color-slide").innerHTML = '';
                let backMenu = document.querySelector("#back-menu");
                backMenu.style.display = 'none';
                clickNodeId = null;
                clickLineId = null;
            }
            metricFlow.back.onmousemove = function (e) {
                if (!isDown) {
                    return;
                }
                if (isDrag) {
                    return;
                }
                let x = e.clientX;
                let y = e.clientY;
                moveTracks.push([x, y]);
                metricFlow.createPath(lastPathX, lastPathY, x, y);
                lastPathX = x;
                lastPathY = y;
            }
            metricFlow.back.ondblclick = function () {
                isDrag = metricFlow.switchDrag();
                Dreamer.destroyAll();
                if (isDrag) {
                    var closeMsg = Dreamer.loading("Switch to Dragging State");
                    setTimeout(function () {
                        closeMsg();
                    }, 8000);
                } else {
                    var closeMsg = Dreamer.loading("Switch to Drawing State");
                    setTimeout(function () {
                        closeMsg();
                    }, 8000);
                }
            }
            metricFlow.back.onmouseup = function (e) {
                isDown = false;
                if (isDrag) {
                    return;
                }
                let minX = Number.MAX_SAFE_INTEGER;
                let maxX = Number.MIN_SAFE_INTEGER;
                let minY = Number.MAX_SAFE_INTEGER;
                let maxY = Number.MIN_SAFE_INTEGER;
                for (let i = 0; i < moveTracks.length; i = i + 1) {
                    if (moveTracks[i][0] > maxX) {
                        maxX = moveTracks[i][0]
                    }
                    if (moveTracks[i][0] < minX) {
                        minX = moveTracks[i][0]
                    }
                    if (moveTracks[i][1] > maxY) {
                        maxY = moveTracks[i][1]
                    }
                    if (moveTracks[i][1] < minY) {
                        minY = moveTracks[i][1]
                    }
                }
                if (lastNodeMinX != null) {
                    let xDistance = Math.abs(minX - lastNodeMinX);
                    let yDistance = Math.abs(minY - lastNodeMinY);

                    let xMaxDistance = Math.abs(maxX - lastNodeMaxX);
                    let yMaxDistance = Math.abs(maxY - lastNodeMaxY);
                    if (xDistance < 30) {
                        minX = lastNodeMinX;
                    }
                    if (yDistance < 30) {
                        minY = lastNodeMinY;
                    }
                    if (xMaxDistance < 30) {
                        maxX = lastNodeMaxX;
                    }
                    if (yMaxDistance < 30) {
                        maxY = lastNodeMaxY;
                    }
                }
                fetch('/drawIntent', {
                    method: 'post',
                    body: JSON.stringify({'seq': moveTracks}),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(response => response.json())
                    .then(json => {
                        if (json['intent'] == 'line') {
                            drawLine(moveTracks[moveTracks.length - 1][0], moveTracks[moveTracks.length - 1][1]);
                        } else if (json['intent'] == 'circle') {
                            drawCircle(minX, minY, maxX, maxY);
                        } else if (json['intent'] == 'rectangle') {
                            drawRectangle(minX, minY, maxX, maxY);
                        }
                        moveTracks = [];
                        let paths = document.getElementById('trackPathSvgs');
                        paths.innerHTML = ''
                    }).catch(e => {
                })
            }
        }
    </script>
</head>
<body>

<div id="graph" height="650px" width="auto">

</div>
<canvas id="canvas" style="opacity: 0"></canvas>
<input id="node-input" autofocus="true" type="text" onchange="setNodeTitle(this.value)">

<ul id="back-menu" class="menu">
    <li style="border-bottom: 1px solid darkcyan" onclick="newNode(event,'circle');">
        <div style="width: 15px;height: 15px;background-color: #177854;margin:auto;border-radius: 10px"></div>
    </li>
    <li style="border-bottom: 1px solid darkcyan" onclick="newNode(event,'rectangle');">
        <div style="width: 20px;height: 10px;background-color: #25264c;margin:auto"></div>
    </li>
    <li style="border-bottom: 1px solid darkcyan;" onclick="newNode(event,'textRectangle');">
        <div style="width: 23px;height: 11px;background-color: white;margin:auto;border: 1px solid #25264c;line-height: 11px;">
            text
        </div>
    </li>
    <li onclick="clearAll();">Clear All</li>
</ul>


<ul id="node-menu" class="menu">
    <li style="border-bottom: 1px solid darkcyan" onclick="cloneRightNode();">→</li>
    <li style="border-bottom: 1px solid darkcyan" onclick="cloneDownNode();">↓</li>
    <li style="border-bottom: 1px solid darkcyan" onclick="setNodeColor(event)">Color</li>
    <li onclick="removeNode();">Delete</li>
</ul>

<ul id="line-menu" class="menu">
    <li style="border-bottom: 1px solid darkcyan" onclick="setLineColor(event)">Color</li>
    <li onclick="removeLine();">Delete</li>
</ul>

<ul id="ray-menu" class="menu">
    <li style="border-bottom: 1px solid darkcyan" onclick="setLineColor(event)">Color</li>
    <li onclick="removeRay();">Delete</li>
</ul>
<div id="color-container">
    <div id="color-picker"></div>
    <div id="color-slide"></div>
</div>
</body>
</html>